<template>
  <div id="app">
    <Nav ref="nav"></Nav>
    <div class="routerView">
      <TestVue></TestVue>
    </div>
  </div>
</template>
<script>
import Nav from './components/Nav.vue';
import TestVue from './testVue/index.vue';
export default {
  components: { Nav, TestVue, TestVue },
  data() {
    return {
      navWidth: 0
    }
  },
  mounted() {
    this.navWidth = this.$refs.nav.$el.offsetWidth + 'px'
  }
}
</script>
<style>

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;

}

.routerView {
  flex: 1;
  height: 100%;
  position: absolute;
  left: v-bind(navWidth);
  right: 0;
  overflow-y: auto;
  background-color: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: .2rem;
  /* font-size: .2rem; */
}
</style>
